<!DOCTYPE html>
<html lang="en">

<head>
    <title>$INSERT_PAGE_TITLE_HERE</title>
    <meta charset="UTF-8" />
    $INSERT_JS_LIBRARIES_HERE

    <script>
        var surfaceMapInfo = $INSERT_STAT_MAP_JSON_HERE;


        function makePlot(surface, hemisphere, divId) {

            decodeHemisphere(surfaceMapInfo, surface, hemisphere);
            info = surfaceMapInfo[surface + "_" + hemisphere];
            info["type"] = "mesh3d";
            info["vertexcolor"] = surfaceMapInfo["vertexcolor_" + hemisphere];

            let data = [info];

            info['lighting'] = getLighting();
            let layout = getLayout("surface-plot", "select-view",
                                   surfaceMapInfo["black_bg"]);
            layout['title'] = {
                text: surfaceMapInfo['title'],
                font: {size: surfaceMapInfo["title_fontsize"],
                       color: textColor(surfaceMapInfo["black_bg"])},
                yref: 'paper',
                y: .95};
            let config = getConfig();

            Plotly.react(divId, data, layout, config);

            if(surfaceMapInfo["colorbar"]){
                addColorbar(surfaceMapInfo["colorscale"],
                            surfaceMapInfo["cmin"],
                            surfaceMapInfo["cmax"],
                            divId, layout, config,
                            surfaceMapInfo["cbar_fontsize"],
                            surfaceMapInfo["cbar_height"],
                            color=textColor(surfaceMapInfo["black_bg"]));
            }
        }

        function addPlot() {

            let hemisphere = $("#select-hemisphere").val();
            let kind = $("#select-kind").val();
            makePlot(kind, hemisphere, "surface-plot");
        }

        function surfaceRelayout(){
            return updateLayout("surface-plot", "select-view",
                                surfaceMapInfo["black_bg"]);
        }

    </script>
    <script>
        $(document).ready(
            function() {
                if(surfaceMapInfo["full_brain_mesh"]){
                    $("#select-hemisphere").change(addPlot);
                    $("#select-kind").change(addPlot);
                }
                else{
                    $("#select-hemisphere").hide();
                    $("#select-kind").hide();
                }
                addPlot();
                $("#select-view").change(surfaceRelayout);
                $("#surface-plot").mouseup(function() {
                    $("#select-view").val("custom");
                });
                $(window).resize(surfaceRelayout);

            });
    </script>
</head>

<body>
    <div id="surface-plot"></div>

    <select id="select-hemisphere">
        <option value="left">Left hemisphere</option>
        <option value="right">Right hemisphere</option>
    </select>

    <select id="select-kind">
        <option value="inflated">Inflated</option>
        <option value="pial">Pial</option>
    </select>

    <select id="select-view">
        <option value="left">view: Left</option>
        <option value="right">view: Right</option>
        <option value="front">view: Front</option>
        <option value="back">view: Back</option>
        <option value="top">view: Top</option>
        <option value="bottom">view: Bottom</option>
        <option value="custom">view: -</option>
    </select>

</body>

</html>
